<template>
  <div>
     <h1>vuex讲解</h1>
     <!-- 在页面直接渲染state数据 -->
      <h1>使用state的数据：{{$store.state.count}}</h1>
      <h1>计算属性getters：{{$store.getters.doubleCount}}</h1>
       <button @click="toAdd">调用mutations改变state数据</button>
       <hr>
       <button @click="plus">触发actions去修改state</button>
       <hr>
       <h1>用分模的数据和方法了</h1>
       <h1>分模块的数据</h1>
       <h1 v-for="(item,index) in $store.state.cartStore.cartList" :key="index">
         {{item.name}} ---{{item.price}}
       </h1>
       <!-- 计算属性不允许使用.调用
         $store.getters ["分模块名/属性"]-->
       <h1 v-for="item in $store.getters['cartStore/myCartList']"> 
        {{item.name}} -&&&&-{{item.price}}</h1>
  </div>
</template>
<script>
export default {
  methods:{
    toAdd(){
    //  触发mutations 方法用$store.commit("方法名",实参)
    this.$store.commit("changeCount",5)
    },
    plus(){
      // 触发actions的方法 去修改state
      // 触发actions的方法 用$store.dispatch
      this.$store.dispatch("actCount",20)
    }
  }
}
</script>